/**
 * 学习目标：React绑定一个click事件
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  handleClick() {
    alert(1);
    alert(2);
    alert(3);
  }

  render() {
    console.log('this -----> ', this);
    return (
      <>
        <div>我是App</div>
        <button
          // 语法： on+大写驼峰事件名 = {函数名}
          // 1. 代码量太多，不建议
          // onClick={function () {
          //   alert('我是按钮');
          // }}

          // 2. 👍使用箭头函数，减少代码量
          // onClick={() => alert('我是按钮')}

          // 3. 多行代码，建议还是写函数
          onClick={this.handleClick}

          // 常见的错误写法
          // 1. 函数名直接就调用 ❌❌❌ onClick={this.handleClick()}
          // 2. 必须接收一个函数，而且要放在花括号里面
          // onClick="alert(1)" 、 onClick="this.handleClick"
        >
          我是按钮
        </button>
      </>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
